<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
        <material-file ref="imagePanel" file-type="image" @change="materialCount" />
      </el-tab-pane>
      <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
        <material-file ref="voicePanel" file-type="voice" @change="materialCount" />
      </el-tab-pane>
      <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
        <material-file ref="videoPanel" file-type="video" @change="materialCount" />
      </el-tab-pane>
      <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
        <material-news ref="newsPanel" @change="materialCount" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { wxAssetsMaterialCount, wxAssetsMaterialNewsInfo } from '@/api/wx'
export default {
  components: {
    MaterialFile: () => import('./assets/material-file'),
    MaterialNews: () => import('./assets/material-news')
  },
  data() {
    return {
      activeTab: 'image',
      assetsCount: {
        imageCount: '..',
        videoCount: '..',
        voiceCount: '..',
        newsCount: '..'
      }
    }
  },
  mounted() {
    this.materialCount()
  },
  methods: {
    handleTabClick(tab, event) {
      this.$nextTick(() => {
        this.$refs[tab.name + 'Panel'].init()
      })
    },
    materialCount() {
      wxAssetsMaterialCount().then(response => {
        this.assetsCount = response.data
      })
    }

  }
}
</script>
